<template>
	<div>




		<div class="header">

			<van-nav-bar style="  background: linear-gradient(90deg, #41A9B7,#4fd4e2, #41A9B7);height: 5rem;line-height: 5rem;">

				<span class="title" slot="title">填写资料</span>


				<span style="font-size: 1.5625rem ; color: white; font-weight: 500;" slot="right">
					<van-button type="primary" color="#348994" @click="back">&nbsp;返&nbsp;&nbsp;&nbsp;回&nbsp;</van-button>
				</span>
			</van-nav-bar>

		</div>




		<!-- display: flex; align-items: center; -->
		<div class="content">



			<div class="cspan" style=" margin: 0 auto; margin-top: 1.5rem; width: 50%; ">


				<div style="margin-bottom: 1rem;">龛位编号：{{ledList|ledName}}</div>


				<div class="demo-input-suffix">
					<div class="label">逝者姓名：</div>
					<el-input @focus="openOsk" @blur="closeOsk" placeholder="请输入内容" style="width: 500px;" prefix-icon="el-icon-edit"
					 v-model="departed"></el-input>
				</div>
				<div class="demo-input-suffix">
					<div class="label">圣名：</div>
					<el-input @focus="openOsk" @blur="closeOsk" placeholder="请输入内容" style="width: 500px;" prefix-icon="el-icon-edit"
					 v-model="baptismal_name"></el-input>
				</div>
				<div class="demo-input-suffix">
					<div class="label">逝者年龄：</div>
					<el-input @focus="openOsk" @blur="closeOsk" placeholder="请输入内容" style="width: 500px;" prefix-icon="el-icon-edit"
					 v-model="age"></el-input>
				</div>

				<div class="demo-input-suffix">
					<div class="label">安息时间：</div>
					<!-- value-format="timestamp" -->
					<el-date-picker type="dates" placeholder="选择日期" @change="changeDate()" value-format="yyyy年MM月dd日" align="right"
					 style="width: 500px;" v-model="deathday">
						<i slot="suffix" class="el-input__icon el-icon-date"></i>
					</el-date-picker>
					<!-- <el-input placeholder="请选择日期"  style="width: 300px;" label="wdawddawwad"  suffix-icon="el-icon-date" v-model="input1"></el-input>
					<el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input2"></el-input> -->
				</div>

				<div class="demo-input-suffix">
					<div class="label">家属姓名：</div>
					<el-input @focus="openOsk" @blur="closeOsk" placeholder="请输入内容" style="width: 500px;" prefix-icon="el-icon-edit"
					 v-model="userName"></el-input>
				</div>

				<div class="demo-input-suffix">
					<div class="label">家属手机：</div>
					<el-input @focus="openOsk" @blur="closeOsk" placeholder="请输入内容" style="width: 500px;" prefix-icon="el-icon-edit"
					 v-model="phoneNumber"></el-input>
				</div>



				<div class="demo-input-suffix">
					<div class="label">存放时长：</div>
					<div style="display: inline-block; width: 500px; border: #217a99 1px solid;text-align: left; background-color: #49b6c5;height: 2rem; ">


						<div v-for="price,key in led_price" class="selectTime" @click="selectTime(price,key)" :class="{selected:cprice.key==key}"
						 style="display: inline-block;">
							{{price.title}}
						</div>


					</div>


				</div>

				<div class="demo-input-suffix">
					<div class="label">追思语：</div>

					<el-select style="width: 500px;" v-model="qifu" placeholder="请选择">
						<el-option style="font-size: 0.8rem;" v-for="item in options" :key="item.id" :label="item.content" :value="item.content">
						</el-option>
					</el-select>

				</div>











			</div>





			<div style="margin: 0 auto; position: relative; bottom: -8rem">

				<div style="font-size: 1.3rem;color: #424242">
					金额：{{total_fee}} 元
				</div>
				<van-button @click="submit()" color="#217a68" size="large" style="  width: 15rem;">下一步</van-button>
			</div>




		</div>







	</div>






	</div>

</template>

<script>
	export default {


		data() {
			return {
				form: {},

				minDate: new Date(1900, 0, 1),
				maxDate: new Date(2050, 1, 1),
				currentDate2: new Date(),
				editDeathdayShow: false,



				focus_flag: false,
				canOpen: true,
				keyboard: false,
				cprice: {},
				total_fee: 0,
				ledList: [{
					code: "A1"
				}, {
					code: "A2"
				}],
				baptismal_name: '',
				age: '',
				deathday: '',
				userName: '',

				phoneNumber: '',
				qifu: '',
				departed: '',

				errormessage: '',

				led_price: [{
					"title": "一天",
					"create_time": 1545960786279,
					"tid": null,
					"day": 1,
					"price": 0.01
				}, {
					"title": "半年",
					"create_time": 1545960818376,
					"tid": null,
					"day": 180,
					"price": 180
				}, {
					"title": "一年",
					"create_time": 1545960830201,
					"tid": null,
					"day": 365,
					"price": 365
				}],
				ledList: [{}, {}],

				message: 'Hello Vue!',
				options: [{
					"content": "text1"
				}, {
					"content": "text2"
				}],



			}
		},
		methods: {

			changeDate() {

				console.log(this.deathday);

			},

			formatter() {

			},

			back() {
				//this.$router.go(-1);
				
				
				this.$router.push(
				{
					path: '/gongfoStep01',
					query: {
						//total_fee: this.totalFee,
						ledList: this.ledList,
						//day: this.durationTime
					}
				}
				);
				
				
				
				
				
			},


			/* async dokeyboard(p){
				if(p==1){
					
				}else if(p==2)
			}, */

			focus() {

				/* 	if(!this.focus_flag){
						this.openOsk();
					}else{
					this.focus_flag=true;
					setTimeout(()=>{
						
						this.openOsk();
						
					},1000);
					
					} */

				/* 	
				this.focus_flag=true;
				this.openOsk();
			
				setTimeout(()=>{
					this.focus_flag=false;
					 },10); */




			},

			blur() {
				//看看现在的聚焦状态，如果是聚焦状态，就不要触犯关闭了
				/* 	setTimeout(()=>{
					if(!this.focus_flag){
						this.closeOsk();
						 this.focus_flag=false;
					}
					 },2); */




			},


			async openOsk() {

				await this.axios.get('http://localhost:8088/openOsk')
					.then((res) => {
						this.keyboard = true;
						console.log("打开键盘！！！")
					})
					.catch((err) => {
						console.log("失败了");
						console.log(err)
					});


			},
			async closeOsk() {
				await this.axios.get('http://localhost:8088/closeOsk')
					.then((res) => {
						console.log("关闭键盘！！！")
					})
					.catch((err) => {
						console.log("失败了");
						console.log(err)
					});

			},





			clickGetValue() {

			},

			submit() {


				/* let total_fee = v[3];
				this.total_fee = total_fee;

				console.log("---------------------------------------->", this.total_fee);
				let ledList = this.$route.query.ledList;

				this.ledList = ledList;

				console.log("this.ledList===============", this.ledList); */

				let day = this.cprice.day;
				//验证数据

				if (this.departed == '') {
					//this.errormessage = "姓名不能为空！";
					this.$toast.fail({
						message: '逝者姓名不能为空！'
					});

					return;
				}


				if (this.deathday.length == 0) {
					//this.errormessage = "姓名不能为空！";
					this.$toast.fail({
						message: '请填写逝者安息时间'
					});
					return;
				}

				if (this.userName == '') {
					//this.errormessage = "姓名不能为空！";
					this.$toast.fail({
						message: '家属姓名不能为空！'
					});
					return;
				}

				if (this.phoneNumber == '') {
					//this.errormessage = "手机号不能为空！";
					this.$toast.fail({
						message: '手机号不能为空！'
					});
					return;
				}

				if (!/^1[3456789]\d{9}$/.test(this.phoneNumber)) {
					//this.errormessage = "手机号码格式不正确！";
					this.$toast.fail({
						message: '手机号码格式不正确！'
					});
					return;
				}

				/* 	else {
					this.errormessage = "";
				}
 */

				if (this.total_fee == 0 || this.total_fee == "0") {
					this.$toast.fail({
						message: '请选择供佛时长！'
					});
					return;
				}


				let tempDate = this.deathday[0];
				for (var i = 1; i < this.deathday.length; i++) {
					tempDate = tempDate + "," + this.deathday[i];
				}
				
				

				this.$router.push({
					path: '/GongfoStep1',
					query: {
						total_fee: this.total_fee,
						ledList: this.ledList,
						day: day,
						priceTitle: this.cprice.title,
						userName: this.userName,
						phoneNumber: this.phoneNumber,
						qifutext: this.qifu,
						departed: this.departed,
						baptismal_name: this.baptismal_name, //圣名
						age: this.age,
						deathday: tempDate,
						deathdayObj:this.deathday,
						cprice:this.cprice,
						led_price:this.led_price

					}
				});





			},

			/* 
			 
			 
			 juti
			 
			 
			 */


			selectTime(price, key) {


				this.cprice = price;
				this.cprice.key = key;
				//this.total_fee = this.ledList.length * price.price;
				this.total_fee = price.price; //改版后价格计算

			},
			getPrice() {

				if (this.$store.getters.getTempleData.price_custom == 1) { //开启价格定制

					let ids = this.ledList[0].id + "";
					for (let i = 1; i < this.ledList.length; i++) {
						ids = ids + "," + this.ledList[i].id;
					}

					axios.get(this.$config.doMqttUrl + "/led/getGoodsPrice", {

							params: {
								ids: ids, //已选led ids
								tid: localStorage.tid
							}
						})
						.then((res) => {
							console.log(res.data);


							/* 	this.led_price = JSON.parse(res.data.led_price);
								for (let i = 0; i < this.led_price.length; i++) {
									this.led_price[i].price = this.led_price[i].price * this.ledList.length;
								} */
							let priceTemp1 = JSON.parse(res.data[0].price_detail);

							for (let i = 1; i < res.data.length; i++) {
								let priceTemp2 = JSON.parse(res.data[i].price_detail);

								for (let i = 0; i < priceTemp1.length; i++) {
									priceTemp1[i].price += priceTemp2[i].price;
								}
							}

							this.led_price = priceTemp1;


						})
						.catch(function(error) {
							window.console.log(error);
							alert("数据获取失败!");
						});


				} else {
					axios.post("https://mianmianshi.com/cms/temple/client/getPrice", {
							where: {
								id: localStorage.tid
							}
						})
						.then((res) => {

							this.led_price = JSON.parse(res.data.led_price);

							for (let i = 0; i < this.led_price.length; i++) {
								this.led_price[i].price = this.led_price[i].price * this.ledList.length;
							}

						})
						.catch(function(error) {
							window.console.log(error);
							alert("数据获取失败!");
						});
				}




			}
			
			
			,
			
			getQifuText(){
				/* 祈福语 */
				axios.post('https://mianmianshi.com/cms/temple/client/getQifuText', {
						where: {
							'tid': localStorage.tid
						}
					})
					.then((response) => {
						console.log(response);
						this.options = response.data;
				
					})
					.catch(function(error) {
						console.log(error);
					});
			}
			
		




		},
		filters: {

			//[{"title":"一天","create_time":1545960786279,"tid":null,"day":1,"price":0.01},{"title":"一个月","create_time":1545960801124,"tid":null,"day":30,"price":60},{"title":"半年","create_time":1545960818376,"tid":null,"day":180,"price":180},{"title":"一年","create_time":1545960830201,"tid":null,"day":365,"price":365}]
			//过滤数据用作显示
			ledName(value) {
				let str = "";
				for (let i = 0; i < value.length; i++) {
					if (i == value.length - 1) {
						str = str + value[i].code;
					} else {
						str = str + value[i].code + ","
					}
				}
				if (str.length > 20) {
					str = str.substring(0, 20) + "....";
				}
				return str;
			}

		},

		created() {
			
			if(this.$route.query.backShow){
				
				
				this.total_fee = this.$route.query.total_fee;
				this.ledList = this.$route.query.ledList;
				//this.day = this.$route.query.day;
				this.phoneNumber = this.$route.query.phoneNumber;
				this.userName = this.$route.query.userName;
				this.qifu = this.$route.query.qifutext;
				this.departed=this.$route.query.departedName;
				//this.priceTitle=this.$route.query.priceTitle;
				this.baptismal_name=this.$route.query.baptismal_name;
				this.age=this.$route.query.age;
				//this.deathday=this.$route.query.deathday;
				this.deathday=this.$route.query.deathdayObj;
				this.cprice=this.$route.query.cprice;
				this.led_price=this.$route.query.led_price;
				
				this.getQifuText();
				
			}else{
				
				this.ledList = this.$route.query.ledList;
				this.getQifuText();
				this.getPrice();
			}



		},
		mounted() {




		}

	}
</script>

<style>
	.el-input__inner {

		/* font-family:"Microsoft";
	 font-size:20px; */
		height: 2rem;
		font-size: 0.8rem;
	}


	.demo-input-suffix {
		margin-top: 0.375rem;
		color: #333333;
		font-size: 0.8rem;
		font-weight: 500;

	}

	.item {

		margin: 0.5rem;
		display: flex;
		align-items: center;
		/* border: solid #002451; */
	}

	#st0 {
		height: 3.125rem;
		width: 12rem;

		/* 	position: absolute;
		bottom: 2rem;
		left: 47%; */
		margin-top: 1rem;

		text-align: center;





	}

	.pc {
		font-size: 1rem;
	}

	/* 	input {
		outline-style: none;
		border: 1px solid #ccc;
		border-radius: 3px;
		padding: 13px 14px;
		width: 25rem;
		font-size: 1rem;
		;
		font-weight: 700;
		background: wheat;
		
	}
 */

	/* 	select {
		outline-style: none;
		border: 1px solid #ccc;
		border-radius: 3px;
		padding: 13px 14px;
		width: 25rem;
		font-size: 1.2rem;
		font-weight: 700;
		background: wheat;
	} */


	/* option {
	
		font-size: 1rem;
	} */

	/*
	 
	消除滚动条，牛逼 
	 */
	.select::-webkit-scrollbar {
		display: none
	}



	/* 	input:focus {
		border-color: #66afe9;
		outline: 0;
		-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
	} */

	.cspan {

		font-size: 1.2rem;
		color: #837a32;
		font-weight: 600;
	}


	.cli {
		margin-top: 0.8rem;
		display: inline-block;
		text-align: center;
		margin-left: 0.8rem;


	}

	.selectTime {
		list-style: none;
		color: white;
		width: 4rem;
		height: 1.8rem;
		background: #348994;
		line-height: 1.8rem;
		border: solid 0.5px #002451;
		font-size: 1rem;
		margin-left: 0.3125rem;
		text-align: center;
	}

	.label {
		font-size: 0.85rem;
		display: inline-block;
		width: 110px;
		font-weight: bold;
		text-align: justify;
		text-justify: distribute-all-lines;
		text-align-last: justify;
	}


	.selected {
		background-color: #34D54A;
	}
</style>
